<template>
	<view style="height: 300px">
		<v-carousel v-model:current="current" :items="carouselItems" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500" @change="onCarouselChange">
			<template v-slot:item-0>
				<view style="display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; background-color: #f5f5f5">
					<text>自定义内容 1</text>
				</view>
			</template>
			<template v-slot:item-1>
				<view style="display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; background-color: #e5e5e5">
					<text>自定义内容 2</text>
				</view>
			</template>
			<template v-slot:item-2>
				<view style="display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; background-color: #d5d5d5">
					<text>自定义内容 3</text>
				</view>
			</template>
		</v-carousel>
		<v-carousel :items="carouselItems" :cardMode="true">
			<template v-slot:item-0>
				<view style="display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; background-color: #f5f5f5">
					<text>自定义内容 1</text>
				</view>
			</template>
			<template v-slot:item-1>
				<view style="display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; background-color: #e5e5e5">
					<text>自定义内容 2</text>
				</view>
			</template>
			<template v-slot:item-2>
				<view style="display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; background-color: #d5d5d5">
					<text>自定义内容 3</text>
				</view>
			</template>
		</v-carousel>
	</view>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const current = ref(0);

const carouselItems = [
	{ id: 0, content: '内容 1' },
	{ id: 1, content: '内容 2' },
	{ id: 2, content: '内容 3' }
];

const onCarouselChange = (index: number) => {
	console.log(`当前轮播图索引：${index}`);
};
</script>
